<template>
  <div class="cate">
    <!-- <TopSearch/> -->
    <div class="cate-container">
      <div class="cate-search">
        <van-search
          class="search-van"
          shape="round"
          background="white"
          v-model="searchValue"
          placeholder="回车搜索商品"
          @blur="onBlurSearch"
        />
      </div>
    </div>

    <div class="bottom-goods-list">

      <div class="left-container">
        <div
          class="left-goods-cate"
          v-for="item in goodsCate"
          :title="item.title"
          :key="item.id"
          @click="change(item.id)"
        >
          {{ item.title }}
        </div>
      </div>

      <div class="right-container">
        <div class="goods-list-container">
          <div class="goods-list" v-for="item in showList" :key="item.id">
            <div class="goods-img">
              <img :src="item.icon" />
            </div>
            <p>{{ item.name }}</p>
          </div>
        </div>
      </div>

    </div>

  </div>
</template>
<script>
export default{
  components: {},
  data() {
    return {
      goodsList:[], //保存商品列表 
      index: 0, //保存分类下标
      searchValue: "", //保存搜索内容
      goodsCate: [
        { title: "所有分类", id: 0 },
        { title: "居家", id: 1 },
        { title: "配件装饰", id: 2 },
        { title: "服装", id: 3 },
        { title: "电器", id: 4 },
      ],//保存分类
    };
  },
  computed: {
    //showList来保存更新后的数据
    showList() {
      var searchList = [];
      if (this.searchValue == "") {
        //如果搜索内容为空
        if (this.index == 0) {
          //如果下标为零 渲染出全部数据
          searchList = this.goodsList;
        } else {
          //如果下标不是零 渲染出对应分类数据
          searchList = this.goodsList.slice(
            (this.index - 1) * 7,
            (this.index - 1) * 7 + 7
          );
        }
        return searchList;
      } else {
        //如果搜索框有内容
        if ((this.index == 0)) {
          //如果下标为零 按搜索内容用includes渲染出收据到搜索列表
          searchList = this.goodsList.filter((item) => {
            return item.name.includes(this.searchValue);
          });
          return searchList;
        } else {
          searchList = this.goodsList.filter((item) => {
            return item.name.includes(this.searchValue);
          });
          return searchList.splice(this.index * 7, this.index * 7 + 7);
        }
      }
    },
  },
  methods: {
    change(id) {
      this.index = id;
      console.log(id)
    },
    onBlurSearch(){
        if ((this.index == 0)) {
          //如果下标为零 按搜索内容用includes渲染出收据到搜索列表
          searchList = this.allList.filter((item) => {
            return item.name.includes(this.searchValue);
          });
          return searchList;
        } else {
          searchList = this.allList.filter((item) => {
            return item.name.includes(this.searchValue);
          });
          return searchList.splice(this.index * 7, this.index * 7 + 7);
        }
    },
  },
  mounted(){
    this.$API.getGoodsList().then((res)=>{
    //   console.log(res);
      this.goodsList=res.data.data;
    })
  }
};
</script>
<style  scoped>
.right-container {
  width: 79%;
  height: 100%;
  /* background-color: lightgreen; */
}
.goods-list-container{
  width:100%;
  height:100%;
  /* background-color: burlywood; */
  display: inline-flex;
  flex-wrap: wrap;
}
.goods-list{
  margin:4px;
  width:30%;
  height:100px;
  /* border:1px solid cornflowerblue; */
  text-align: center;
}
.goods-img{
  width:100%;
  height:80%;
}
.goods-img img{
  width:100%;
  height:100%;
}
.goods-list p{
  font-size:0.6rem;
}
.left-container {
  width: 21%;
  height: 100%;
  border-right: 1px solid lightgrey;
  /* background-color:lightcoral; */
}
.left-goods-cate {
  width: 100%;
  height: 45px;
  /* background-color:lightslategray; */
  margin-bottom: 3px;
  font-size: 0.66rem;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
.left-goods-cate:hover {
  width: 100%;
  height: 45px;
  margin-bottom: 3px;
  font-size: 0.66rem;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  color: brown;
  border-left: 2px solid brown;
}
.cate-search {
  width: 100%;
  height: 40px;
  background-color: white;
  border-bottom: 1px solid lightgrey;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.search-van {
  width: 80%;
  height: 27px;
}
* {
  margin: 0px;
  padding: 0px;
}
.cate {
  width: 100vw;
  height: 90vh;
  /* background-color: mediumaquamarine; */
  /* display: inline-flex; */
}
.bottom-goods-list {
  width: 100%;
  height: 100%;
  display: inline-flex;
}
</style>